<template>
    <div class="TaskWarp" :class="{teachDivMain:BeginTeaching}">
        <div class="divMain DanXuan"
             @click.stop>
            <div class="divTitle">
                <h2>{{Questions.child.QuestionRemark}}</h2>
            </div>
            <div class="tigan"
                 v-html="Questions.child.stem[0].StemContent"></div>
            <div class="divContent" :style='{top:divContentTop}'>
                <div class="touchMove" @touchstart="TOUCHMOVE" @mousedown="TOUCHMOVE">
                    下拉刷新显示{{divContentTop}}
                </div>
                <div class="boxContent">
                    <div class="itemWarp">
                        <div class="divItem"
                             v-for="(item,index) in Questions.child.stem[0].opts">
                            {{item.OptionNumber}}:
                            <div class="DanXuanOpts"
                                 v-html="item.OptionContent"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="Close" v-show="!BeginTeaching">
            <i class="el-icon el-icon-close"></i>
        </div>
        <transition enter-active-class="animated zoomIn">
            <bigImg :imgSrc="bigImgInfo"
                    v-if="bigImgInfo.src != ''"></bigImg>
        </transition>
    </div>
</template>

<script>
    import {mapGetters, mapActions} from 'vuex'
    import store from '../../../store/index'
    export default {
        name: "DanXuan",
        props: ["Questions"],
        computed: mapGetters([
            'divContentTop',
            'BeginTeaching'
        ]),
        methods: {
            ...mapActions([
                'TOUCHMOVE'
            ]),
        },
        mounted() {
            var _this = this;

            $('.boxContent img').each(function () {
                $(this).upImgSrc()
                $(this).on('dblclick', function () {
                    _this.bigImgInfo.src = $(this).attr('src')
                })
            })

            $('.tigan img').each(function () {
                $(this).upImgSrc()
                $(this).on('dblclick', function () {
                    _this.bigImgInfo.src = $(this).attr('src')
                })
            })

            $('.divContent').height(parseFloat($('.DanXuan').height()) - 80)
            $('.tigan').height(parseFloat($('.DanXuan').height()) - 80)
            $('.boxContent').height(parseFloat($('.divContent').height()) - 56)
            $('.divItem').css({
                lineHeight: $('.divItem').height() + 'px'
            })
            window.onresize = function () {
                $('.divContent').height(parseFloat($('.DanXuan').height()) - 80)
                $('.tigan').height(parseFloat($('.DanXuan').height()) - 80)
                $('.boxContent').height(parseFloat($('.divContent').height()) - 56)
                $('.divItem').css({
                    lineHeight: $('.divItem').height() + 'px'
                })
            }

        },
        data() {
            return {
                bigImgInfo: {
                    src: ''
                }
            }
        }
    }


</script>

<style lang="scss" rel="stylesheet/scss">
    .DanXuanOpts {
        display: inline;
        height: 100%;
        p {
            display: inline;
        }
        img {
            /*height: 80px;*/
        }
    }
</style>
<style lang="scss" rel="stylesheet/scss" scoped>
    @import '../../../assets/css/public.scss';

    .TaskWarp {
        height: 90%;
        width: 90%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        .divMain {
            position: absolute;
            overflow: hidden;
            height: 100%;
            width: 100%;
            .divTitle {
                height: 80px;
                background: #fff;
                position: relative;
                box-shadow: 0 10px 20px 2px rgba(197, 208, 218, 0.8);
                h2 {
                    font-size: 20px;
                    line-height: 80px;
                    color: #56545A;
                }
            }
            .tigan {
                font-size: 24px;
                background: #D4D7D9;
                line-height: 2em;
                min-height: 100%;
            }
            .divContent {
                background: #fff;
                position: absolute;
                top: 140px;
                left: 0;
                width: 100%;
                overflow: hidden;
                height: 100%;
                .touchMove {
                    margin: 0 auto;
                    width: 309px;
                    height: 56px;
                    font-size: 16px;
                    background: #81a4ff;
                    border-radius: 0 0 8px 8px;
                    line-height: 56px;
                    text-align: center;
                    color: #fff;
                    font-weight: bold;
                }
                .boxContent {
                    overflow: scroll;
                    .itemWarp {
                        height: 80%;
                        overflow: auto;
                        display: flex;
                        flex-direction: column;
                        .divItem {
                            height: 14%;
                            margin: 1em auto;
                            width: 80%;
                            padding: 0 54px;
                            border-radius: 20px;
                            box-shadow: 0 2px 8px 0 #c5d0da;
                            background: #fff;
                            img {
                                height: 80px
                            }
                            .OptionsIndex {
                                position: absolute;
                                width: 40px;
                                height: 40px;
                                border-radius: 50%;
                                background: #007aff;
                                line-height: 40px;
                                text-align: center;
                                color: #fff;
                                top: 20px;
                                left: 10px;
                            }
                            * {
                                font-size: 24px;
                            }
                        }
                    }
                }
            }
            .current span {
                color: #666;
            }
        }
    }
</style>
